<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .box{
    height: 300px;
    width: 300px;
    background-color: #80ff33;
  }
  .nav {
    border-collapse: collapse;
    border: 2px solid blue;
  }
</style>
<body>
<!--  当需要操作元素的style样式比较多时 一个一个样式修改很繁琐 所以将样式封装成一个一个的类 然后用js去修改元素的类进行样式的修改-->
  <div>

  </div>
  <script>
    document.querySelector('div').className = 'box';
    document.querySelector('div').className = 'box nav';
    // .classList.toggle('a') 当元素中有a类名时 则移除a类名 当没有a类名时则为元素加上a类名
    document.querySelector('div').classList.toggle('nav');
    document.querySelector('div').classList.toggle('nav');
    document.querySelector('div').classList.remove('nav');

  </script>
</body>

</html>